<template>
  <div class="index checkts2" style="background: #fff;">



    <div class="con t_outbox">
      <div style="width: 200px; box-sizing: border-box; padding: 0 29px; border-right: 1px #ccc solid;">
        <div style="font-size: 20px; text-align: center;">处理工单</div>
        <!-- <div style="display: flex;padding-left: 50px;box-sizing: border-box;">

        </div> -->
        <div class="t_order_title" :class="{t_order_title_lei:(item.id==chooseorderid)&&(detaillist.length>1)}"
          style="color: #5C5C5C;" @click="changeorder(item.id)" v-for="(item,index) in detaillist" :key="index">
          工单编号：{{ item.id }}
        </div>
      </div>
      <div class="t_order_detail" style="position: relative;">
        <img v-if="choosedetail.status==3" src="../../../static/img/clbh.png" class="t_clbh" alt="">
        <el-button @click="allcopy" class="t_all_ts" type="primary" size="small" plain>一键复制投诉信息</el-button>


        <div class="t_detail_kj" style="margin-left: 50px;color:#9F9F9F">
          <div>创建时间：{{ choosedetail.created_at }}</div>
          <div style="margin-left: 50px;">截止时间：{{ choosedetail.overdue_at }}</div>
        </div>
        <div class="t_detail_kj" style="margin-left: 50px;color: #5D5D5D;">
          <div><span style="color: #333333;">投诉来源：</span>
            <span v-if="choosedetail.source==1">运营商投诉</span>
            <span v-if="choosedetail.source==2">工商局投诉</span>
            <span v-if="choosedetail.source==3">平台工单投诉</span>
            <span v-if="choosedetail.source==4">电话投诉</span>
            <span v-if="choosedetail.source==5">其他投诉</span>

          </div>
          <div style="margin-left: 50px;">
            <span style="color: #333333;">优先级：</span>
            <span v-if="choosedetail.priority==3" style="color: #FF0000;">最高</span>
            <span v-if="choosedetail.priority==2" style="color: #F600CB;">较高</span>
            <span v-if="choosedetail.priority==1" style="color: #FFA700;">普通</span>
            <span v-if="choosedetail.priority==0">较低</span>

          </div>
          <div style="margin-left: 50px;color: #5D5D5D;">
            <span style="color: #333333;">当前状态：</span>
            <span v-if="choosedetail.status==0">待处理</span>
            <span v-if="choosedetail.status==1">处理中</span>
            <span v-if="choosedetail.status==2">处理完成</span>
            <span v-if="choosedetail.status==3">处理中</span>
          </div>
          <div style="margin-left: 50px;">当前处理人：{{ choosedetail.handler }}</div>
        </div>
        <div class="t_detail_kj">
          <div class="t_deta_title">用户投诉内容：</div>
          <div class="t_deta_con">{{ choosedetail.content }}</div>
        </div>
        <div class="t_detail_kj" v-for="(item,index) in choosedetail.restart_reason" :key="index">
          <div class="t_deta_title">重启投诉原因{{index+1}}：</div>
          <div class="t_deta_con">{{ item }}</div>
        </div>
        <div class="t_detail_kj">
          <div class="t_deta_title">处理意见：</div>
          <div class="t_deta_con">{{ choosedetail.requirement }}</div>
        </div>
        <div class="t_detail_kj">
          <div class="t_deta_title">订单信息：</div>
          <div class="t_deta_con">
            <div class="t_order_box">
              <div class="t_order_box_detail t_order_box_detail_head">
                <div>订单ID：{{ choosedetail.order_id }}<i class="el-icon-document-copy"
                    style="color: #077ECE; font-size: 16px; margin-left: 10px; cursor: pointer;"
                    @click="copy(choosedetail.order_id)"></i>
                </div>
                <div>订单来源：{{ choosedetail.order_source }}</div>
                <div>外部订单编号：{{ choosedetail.source_id }}<i class="el-icon-document-copy"
                    style="color: #077ECE; font-size: 16px; margin-left: 10px; cursor: pointer;"
                    @click="copy(choosedetail.source_id)"></i>
                </div>
                <div>平台创建时间：{{ choosedetail.order_created_at }}</div>
              </div>
              <div class="t_order_box_detail">
                <div class="t_detail_right">商品名称：{{ choosedetail.product_sku }}</div>
                <div class="t_detail_right">商品编码：{{ choosedetail.source_sku }}</div>
                <div class="t_detail_right">购买号码：{{ choosedetail.plan_mobile }}</div>
                <div>生产号码：{{ choosedetail.plan_mobile_produced }}</div>
              </div>
              <div class="t_order_box_detail" style="display: block;">
                <div style="display: flex;">
                  <div class="t_detail_right">证件姓名：{{ choosedetail.id_card_name }}</div>
                  <div class="t_detail_right">收件人：{{ choosedetail.address_name }}</div>
                  <div>证件号码：{{ choosedetail.id_card_num }}</div>
                </div>
                <div style="display: flex;margin-top: 20px;">
                  <div class="t_detail_right">联系电话：{{ choosedetail.address_mobile }}</div>
                  <div class="t_detail_right">
                    收货地址：{{ choosedetail.address_province }}{{ choosedetail.address_city }}{{ choosedetail.address_district }}{{ choosedetail.address }}
                  </div>
                  <el-button type="text" @click="fullmsg(choosedetail.order_id)">查看完整信息</el-button>
                </div>
              </div>
              <div class="t_order_box_detail">
                <div class="t_detail_right">订单状态：{{ choosedetail.order_status }}</div>
                <div class="t_detail_right">激活状态：{{ choosedetail.active_status }}</div>
                <div>退款状态：{{ choosedetail.refund_status }}</div>
              </div>
              <div class="t_order_box_detail">
                <div class="t_detail_right">物流公司：{{ choosedetail.tracking_company }}</div>
                <div>物流单号：{{ choosedetail.tracking_number }}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="t_detail_kj">
          <div class="t_deta_title">拨打电话：</div>
          <div class="t_deta_con">
            <dadianhua v-if="choosedetail.call_logs" :call_logs="choosedetail.call_logs"
              :order_id="choosedetail.order_id" :job_id="$route.query.id"></dadianhua>
          </div>
        </div> -->
        <div class="t_detail_kj">
          <div class="t_deta_title">处理结果：</div>
          <div class="t_deta_con">
            <div v-if="showresult" style="margin-top: -10px;" class="t_bj_box">
              <span v-if="choosedetail.result!=''">{{ choosedetail.result }}</span>
              <span v-else></span>
              <div>
                <el-button @click="copy2" type="text" style="margin-left: 30px;">复制</el-button>
                <el-button type="text" @click="czresult(3)">编辑</el-button>
              </div>

            </div>
            <div v-else>
              <el-input type="textarea" :rows="8" resize='none' v-model="inputresult" placeholder="请输入处理结果"></el-input>
              <div style="text-align: right;
							margin-top: 10px;">

                <el-button size="small" @click="czresult(1)" type="text" style="margin-left: 30px;">取消</el-button>
                <el-button size="small" @click="czresult(2)" type="primary" style="margin-left: 30px;">保存</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="t_detail_kj" style="align-items: center;">
          <div class="t_deta_title">赔付金额：</div>
          <div class="t_deta_con">
            <div v-if="showmoney" class="t_bj_box">
              {{ choosedetail.compensation_amount }}<el-button @click="czmoney(3)" type="text">编辑</el-button>
            </div>
            <div v-else>
              <el-input v-model="inputmoney" type="number" style="width:200px" placeholder="请输入赔付金额"></el-input>
              <el-button size="small" @click="czmoney(1)" type="text" style="margin-left: 30px;">取消</el-button>
              <el-button size="small" @click="czmoney(2)" type="primary" style="margin-left: 30px;">保存</el-button>
            </div>
          </div>
        </div>
        <div class="t_detail_kj">
          <div class="t_deta_title">上传附件：</div>
          <div class="t_deta_con" style="display: flex;width: 0;flex-wrap: wrap;">
            <el-tag style="margin-right: 10px;cursor: pointer;background-color: white;margin-bottom: 10px;"
              v-for="tag in files" :key="tag.id" @close="removetag(tag)" @click="taglink(tag)" closable>
              {{tag.file_name}}
            </el-tag>
            <el-upload v-if="files.length<5" action="#" :on-change="uploadok" :show-file-list="false"
              :auto-upload="false" :multiple="false">
              <el-button size="small" plain round type="primary">点击上传</el-button>
            </el-upload>
            <div v-if="files.length==5">
              <el-button @click="overnum" style="padding: 8px 15px !important;" size="mini" plain round
                type="primary">点击上传</el-button>
            </div>

          </div>
        </div>
        <div style="text-align: center;margin-top: 50px;">
          <el-button @click="backlist(1)" v-if="choosedetail.status!=2" type="primary" plain round>处理完成</el-button>
          <el-button @click="backlist(3)" v-else type="primary" plain round>重启投诉</el-button>
          <el-button @click="backlist(2)" style="margin-left: 50px;" type="primary" plain round>关闭</el-button>
        </div>
      </div>
      <div class="t_talk_box">
        <div class="t_cllc_title">处理流程</div>
        <div class="t_lc_box">
          <div class="t_lc_item" v-for="(item,index) in speaklist" :key="index">
            <div style="color: #9f9f9f;font-size: 14px;">{{ item.created_at }}</div>
            <div style="font-size: 14px;" v-if="item.type==0" class="t_speak_red" v-html="item.content"></div>
            <div style="color: #333333;font-size: 14px;" v-if="item.type==1" v-html="item.content"></div>
          </div>

        </div>
        <el-input type="textarea" v-model="sendmsg" :rows="8" resize='none' placeholder="请输入留言内容按Ctrl+Enter发送"
          @keydown.ctrl.enter.native="send()"></el-input>
      </div>
    </div>
    <!-- 重启投诉 -->
    <el-dialog title="请输入重启原因" :visible.sync="isshowreplace" :center="true" class="t_cq_form" width="500px">
      <el-form>
        <el-form-item :required='true' label="重启原因">
          <el-input style="width: 370px;" v-model="replaceres"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" round @click="surereplace">确认重启</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import dadianhua from './dadianhua.vue'

  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot,
      dadianhua
    },
    name: 'productionBasismanagDj',
    data() {
      return {

        checkid: '',
        speaklist: [],
        sendmsg: '',
        //所有工单
        detaillist: [],
        //当前工单
        choosedetail: {},
        //当前工单id
        chooseorderid: '',
        //是否展示处理结果文字
        showresult: true,
        //是否展示赔付金额
        showmoney: true,
        //输入处理结果
        inputresult: '',
        //输入金额
        inputmoney: '',
        //文件
        files: [],
        //重启弹窗
        isshowreplace: false,
        //重启原因
        replaceres: '',
        shop_id: ""
      }
    },
    created() {

      this.checkid = this.$route.query.id
      //获取左侧详情
      this.getdetail()
      //右侧留言列表
      this.getspeak(this.$route.query.id)
      //文件列表
      this.getfilelist(this.$route.query.id)

      // axios.get('/api/gth/user/shop')
      //   .then(response => {
      //     if (response.data.msg.code == 0) {
      //       this.shop_id = response.data.data.shop_id
      //     } else {
      //       this.$message.error(response.data.msg.info);
      //     }
      //   })
    },

    methods: {
      //右侧留言列表
      getspeak(id) {
        axios.post('/api/web/complaint/job/comment/list', {
            id: id,
            robot_id:this.$route.query.robot_id
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              console.log('右侧留言')
              console.log(response)
              this.speaklist = response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //获取左侧详情
      getdetail() {
        axios.post('/api/web/complaint/job/info', {
            id: this.checkid,
            robot_id:this.$route.query.robot_id
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              console.log('左侧详情')
              console.log(response)
              this.detaillist = response.data.data
              //从几号进，当前就是几号
              for (var x = 0; x < this.detaillist.length; x++) {
                if (this.detaillist[x].id == this.checkid) {
                  this.choosedetail = this.detaillist[x]
                  this.chooseorderid = this.detaillist[x].id
                }
              }

            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //切换订单
      changeorder(id) {
        this.chooseorderid = id
        //右侧留言列表
        this.getspeak(id)
        //文件列表
        this.getfilelist(id)
        for (var x = 0; x < this.detaillist.length; x++) {
          if (this.detaillist[x].id == id) {
            this.choosedetail = this.detaillist[x]
          }
        }
      },
      //操作处理结果
      czresult(type) {
        if (type == 1) {
          //取消
          this.showresult = true
        } else if (type == 2) {
          if (this.inputresult == '') {
            this.$message.error('请输入内容');
            return
          }
          //保存
          axios.post('/api/web/complaint/job/result', {
              id: this.chooseorderid,
              result: this.inputresult,
              robot_id:this.$route.query.robot_id
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                });
                this.choosedetail.result = response.data.data
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
          this.showresult = true
        } else if (type == 3) {
          //编辑
          this.showresult = false
          this.inputresult = this.choosedetail.result
        }

      },
      //操作金额
      czmoney(type) {
        if (type == 1) {
          //取消
          this.showmoney = true
        } else if (type == 2) {

          if (this.inputmoney == '') {
            this.$message.error('请输入内容');
            return
          }
          //保存
          axios.post('/api/web/complaint/job/compensation/amount', {
              id: this.chooseorderid,
              compensation_amount: this.inputmoney,
              robot_id:this.$route.query.robot_id
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                });
                this.choosedetail.compensation_amount = response.data.data
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
          this.showmoney = true
        } else if (type == 3) {
          //编辑
          this.showmoney = false
          this.inputmoney = this.choosedetail.compensation_amount
        }

      },
      //文件列表
      getfilelist(id) {
        axios.post('/api/web/complaint/job/annex/list', {
            id: id,
            robot_id:this.$route.query.robot_id
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              console.log('文件列表')
              console.log(response)
              this.files = response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //上传文件
      uploadok(file) {
        console.log(file);
        var that = this;
        var formData = new FormData();
        formData.append("file", file.raw);
        formData.append("id", this.chooseorderid);
        formData.append("robot_id", this.$route.query.robot_id);

        axios.post('/api/web/complaint/job/add/annex', formData)
          .then(response => {
            if (response.data.data) {
              //文件列表
              this.getfilelist(this.chooseorderid)
              this.$message({
                message: '上传成功',
                type: 'success'
              });

            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },
      //超过5个
      overnum() {
        if (this.files.length == 5) {
          this.$message.error('最多上传5个附件');
        }
      },
      //删除文件
      removetag(tag) {
        console.log(this.files.indexOf(tag))
        var removeid = this.files[this.files.indexOf(tag)].id
        axios.post('/api/web/complaint/job/del/annex', {
            id: removeid,
            robot_id:this.$route.query.robot_id
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              //文件列表
              this.getfilelist(this.chooseorderid)
              this.$message({
                message: '删除成功',
                type: 'success'
              });

            } else {
              this.$message.error(response.data.msg.info);
            }
          })

      },
      //下载文件
      taglink(tag) {
        console.log(this.files.indexOf(tag))
        var url = this.files[this.files.indexOf(tag)].file_url
        var name = this.files[this.files.indexOf(tag)].file_name
        axios.get(url, {
          responseType: 'blob'
        }).then((res) => {
          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
          const link = document.createElement('a');
          link.href = downloadUrl;
          link.setAttribute('download', name);
          document.body.appendChild(link);
          link.click();
          link.remove();
        });
      },
      //处理完成或关闭
      backlist(type) {
        if (!this.showmoney || !this.showresult) {
          this.$message.error('请保存或取消当前编辑内容');
          return
        }
        if (type == 1) {
          //处理完成
          axios.post('/api/web/complaint/job/update/handler', {
              id: this.chooseorderid,
              robot_id:this.$route.query.robot_id,
              status: 2
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                //返回页面
                // this.backpage()
                this.$message.success('操作成功！');
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        } else if (type == 2) {
          //关闭
          //返回页面
          this.backpage()
        } else if (type == 3) {
          //重启投诉
          this.isshowreplace = true
        }
      },
      //确认重启
      surereplace() {
        if (this.replaceres == '') {
          this.$message.error('请填写重启原因');
          return
        }
        axios.post('/api/web/complaint/job/restart', {
            id: this.chooseorderid,
            restart_reason: this.replaceres,
            robot_id:this.$route.query.robot_id
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              console.log('确认重启')
              this.$message({
                message: '重启成功',
                type: 'success'
              });
              //返回页面
              this.backpage()
              this.isshowreplace = false

            } else {
              this.$message.error(response.data.msg.info);
            }
          })

      },
      //返回页面
      backpage() {
        if (this.$route.query.tab == 1 || this.$route.query.tab == 2 || this.$route.query.tab == 3 || this.$route.query
          .tab == 4) {
          this.$router.push({
            path: '/tousugongdan',
            query: {
              tab: this.$route.query.tab
            }
          })
        } else if (this.$route.query.tab == 5) {
          this.$router.push({
            path: '/order_question'
          })
        } else if (this.$route.query.tab == 6) {
          this.$router.push({
            path: '/order_question/orderOther'
          })
        } else if (this.$route.query.tab == 7) {
          this.$router.push({
            path: '/order_question/old_dingdan'
          })
        } else if (this.$route.query.tab == 8) {
          this.$router.push({
            path: '/order_question/old_Other'
          })
        }

      },
      send() {
        if (this.sendmsg == '') {
          this.$message.error('请输入内容');
        } else {
          var str = this.sendmsg
          str = str.replace(/\n/g, "<br>");

          //发送留言
          axios.post('/api/web/complaint/job/comment', {
              id: this.chooseorderid,
              content: str,
              robot_id:this.$route.query.robot_id
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                this.sendmsg = ''
                //右侧留言列表
                this.getspeak(this.chooseorderid)
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        }

        console.log("按住ctrl+enter时触发")
      },
      //查看完整信息
      fullmsg(id) {
        axios.post('/api/web/complaint/job/order/info', {
            id: this.chooseorderid,
            robot_id:this.$route.query.robot_id
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              console.log('完整信息')
              this.choosedetail.address = response.data.data[0].address
              this.choosedetail.address_city = response.data.data[0].address_city
              this.choosedetail.address_district = response.data.data[0].address_district
              this.choosedetail.address_mobile = response.data.data[0].address_mobile
              this.choosedetail.address_name = response.data.data[0].address_name
              this.choosedetail.address_province = response.data.data[0].address_province
              this.choosedetail.id_card_name = response.data.data[0].id_card_name
              this.choosedetail.id_card_num = response.data.data[0].id_card_num

            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //复制功能
      copy: function(t) {
        console.log(t)
        t = t.toString()
        var that = this;
        this.$copyText(t).then(res => {
          that.$message.success("复制成功");
        });
      },
      //复制功能
      copy2: function() {
        // console.log(t)
        if (this.choosedetail.plan_mobile_produced == null || this.choosedetail.plan_mobile_produced == '') {
          var schm = '无'
        } else {
          var schm = this.choosedetail.plan_mobile_produced
        }
        if (this.choosedetail.result == null || this.choosedetail.result == '') {
          var cljg = '无'
        } else {
          var cljg = this.choosedetail.result
        }



        var t = '生产号码：' + schm + '\n' + '处理结果：' + cljg


        var that = this;


        this.$copyText(t).then(res => {
          that.$message.success("复制成功");
        });
      },
      allcopy: function() {

        var t = '订单ID：' + this.choosedetail.order_id + '\n' +
          '订单来源：' + this.choosedetail.order_source + '\n' +
          '外部订单编号：' + this.choosedetail.source_id + '\n' +
          '商品名称：' + this.choosedetail.product_sku + '\n' +
          '生产号码：' + this.choosedetail.plan_mobile_produced + '\n' +
          '证件姓名：' + this.choosedetail.id_card_name + '\n' +
          '联系电话：' + this.choosedetail.address_mobile + '\n' +
          '用户投诉内容：' + this.choosedetail.content

        var that = this;


        this.$copyText(t).then(res => {
          that.$message.success("复制成功");
        });
      },

    }
  }
</script>


<style lang="scss" scoped>
  .t_outbox {
    display: flex;
    /* border: 1px solid red; */
    box-sizing: border-box;
    height: calc(100vh - 180px);
  }

  .t_order_detail {
    width: 80%;
    border-right: 1px solid #e3e3e3;
    box-sizing: border-box;
    overflow: auto;
    padding-right: 20px;
  }

  .t_talk_box {
    width: 20%;
  }

  .t_detail_kj {
    display: flex;
    flex-wrap: wrap;
    color: #5D5D5D;
    margin-top: 30px;
    font-size: 14px;
  }

  .t_deta_title {
    width: 130px;
    text-align: right;
    color: #333333;
  }

  .t_deta_con {
    flex: 1;
    color: #5D5D5D;
  }

  .t_cllc_title {
    padding: 0 20px;
    box-sizing: border-box;
  }

  .t_lc_box {
    padding: 20px;
    box-sizing: border-box;
    height: calc(100vh - 400px);
    /* border: 1px solid red; */
    overflow: auto;
  }

  .t_lc_item {
    margin-bottom: 20px;
  }

  .t_order_box {
    border: 1px solid #eeeeee;
  }

  .t_order_box_detail {
    display: flex;
    padding: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #eeeeee;
  }

  .t_order_box_detail_head {
    background-color: #EEF7FF;
    justify-content: space-between;

  }

  .t_detail_right {
    margin-right: 50px;
  }

  .t_speak_red {
    color: #FF0C0C;
  }

  .t_order_title_lei {
    border-radius: 10px;
    background: #2974FF !important;
    color: #fff !important;

  }

  .t_order_title {
    text-align: center; line-height: 42px;
     margin-top: 20px;
     width: 140px;
    // margin-right: 20px;
    font-weight: bold;
    cursor: pointer;
  }

  .t_bj_box {
    justify-content: space-between;
    flex-wrap: wrap;
    display: flex;
    align-items: center;
  }

  /deep/.t_cq_form .el-dialog--center .el-dialog__body {
    padding: 25px 25px 0px;
  }

  /deep/.t_cq_form .el-input__inner {
    background-color: #f7f8fa;
    border: none;

  }

  .t_clbh {
    width: 140px;
    position: absolute;
    right: 30px;
    top: 40px;
  }

  .t_all_ts {

    position: absolute;
    right: 20px;
    top: 10px;
  }

  .index {
    .t_table_box {
      width: 96%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px;
    }

    .see {
      color: #409EFF;
      margin: 20px 0;
      cursor: pointer;
    }

    .cpflex {
      display: flex;
      flex-wrap: wrap;

      /deep/ .el-form-item {
        margin-bottom: 0px;
      }
    }

    .kucun {
      /deep/ .el-input {
        width: 200px;
      }

      .list {
        display: flex;
        text-align: center;
        border-bottom: 1px #EAEAEA solid;

        .bor1 {
          border-right: 1px #EAEAEA solid;

          i {
            color: #409EFF;
            font-size: 14px;
            margin-left: 10px;
            cursor: pointer;
          }
        }

        .th {
          background: #F9F9F9;
          line-height: 45px;
          flex: 1;
          font-size: 14px;
          box-sizing: border-box;
        }

        .td {
          line-height: 45px;
          font-size: 14px;
          flex: 1;
          box-sizing: border-box;
          color: #666;
        }

        .td2 {
          flex: 1.5
        }
      }
    }



    .o_ul {
      background: #F9F9F9;
      display: flex;

      .o_li {
        flex-basis: 160px;
        line-height: 45px;
        display: block;
        color: #727272;
        border-top: 3px #F9F9F9 solid;
        font-size: 14px;
        text-align: center;
      }

      .act {
        border-top: 3px #DD2727 solid;
        background: #FFFFFF;
      }
    }

    .title {
      border-bottom: 1px #EAEAEA solid;
      line-height: 45px;
      padding-left: 30px;
      font-size: 16px;
      background: #F9F9F9;
      color: #727272
    }

    .bsm {
      padding: 20px 20px 0 20px;

      /deep/ .el-input {
        width: 220px;
      }
    }

    .row2 {
      color: #FFF;
      margin-top: 20px;

      a {
        color: #FFF;
      }
    }

    .con {
      margin: 20px;
      // border: 1px #EAEAEA solid;

      .list {
        display: flex;
        text-align: center;
        border-bottom: 1px #EAEAEA solid;

        .bor1 {
          border-right: 1px #EAEAEA solid;

          i {
            color: #409EFF;
            font-size: 14px;
            margin-left: 10px;
            cursor: pointer;
          }
        }

        .th {
          background: #F9F9F9;
          line-height: 45px;
          flex: 1;
          font-size: 14px;
          box-sizing: border-box;
        }

        .td {
          line-height: 45px;
          font-size: 14px;
          flex: 1;
          box-sizing: border-box;
          color: #666;
        }

        .td2 {
          flex: 1.5
        }
      }
    }

    .el-pagination {
      text-align: right;
      margin-right: 20px;
      padding-bottom: 50px;
    }

  }
</style>
